<template>
  <a-card>
    <template #title>
      <div class="section-title">
        <span>立即终审</span>
        <a-tag color="warning">等待中</a-tag>
      </div>
    </template>

    <!-- 案件基本信息 -->
    <div class="case-basic-info" style="margin-bottom: 24px;">
      <a-descriptions title="案件基本信息" :column="2" bordered>
        <a-descriptions-item label="批次名称">{{ caseData.batchName }}</a-descriptions-item>
        <a-descriptions-item label="委案商">{{ caseData.entrustBName }}</a-descriptions-item>
        <a-descriptions-item label="审核文件">
          <a-button type="link" v-if="caseData.auditFile" @click="downloadFile(caseData.auditFile)">
            下载审核文件
          </a-button>
          <span v-else>暂无文件</span>
        </a-descriptions-item>
        <a-descriptions-item label="审核结果">
          <a-tag :color="caseData.auditResult === 'approved' ? 'success' : 'error'">
            {{ caseData.auditResult === 'approved' ? '通过' : '拒绝' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="审核摘要" :span="2">
          {{ caseData.auditSummary || '暂无摘要' }}
        </a-descriptions-item>
      </a-descriptions>
    </div>

    <!-- 案件用户列表 -->
    <div class="case-user-list" style="margin-bottom: 24px;">
      <h4>案件用户列表</h4>
      <a-table 
        :columns="userTableColumns" 
        :dataSource="caseUserList" 
        :pagination="false"
        :scroll="{ y: 300 }"
        size="small"
        bordered
      />
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons" style="text-align: center;">
      <a-button type="primary" @click="downloadSummary" style="margin-right: 8px;">
        下载摘要
      </a-button>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

// 定义属性
defineProps<{
  caseData: any;
  caseUserList: any[];
}>();

// 定义事件
const emit = defineEmits(['download-file', 'download-summary']);

// 用户列表表格列配置
const userTableColumns = [
  {
    title: '用户ID',
    dataIndex: 'userId',
    key: 'userId',
    width: 120,
    ellipsis: true
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    key: 'userName',
    width: 120,
    ellipsis: true
  },
  {
    title: '姓名',
    dataIndex: 'realName',
    key: 'realName',
    width: 100,
    ellipsis: true
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    width: 120,
    ellipsis: true
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    key: 'idCard',
    width: 150,
    ellipsis: true
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80,
    ellipsis: true
  }
];

// 下载文件
const downloadFile = (fileUrl: string) => {
  emit('download-file', fileUrl);
};

// 下载摘要
const downloadSummary = () => {
  emit('download-summary');
};
</script>

<style scoped>
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-user-list h4 {
  margin-bottom: 16px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
}
</style>
